<script setup>
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import MyIcon from '@/components/my-icon/index.vue'
import dataDetails from './dataDetails.vue'
import * as echarts from 'echarts'
import { LineOption, PromotionRankings } from './chartsOption'
const options = ref([
	{
		label: '测试12344',
		value: 1
	}
])
const staffList = ref([
	{
		name: '夏小飞',
		avatar: 'https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/0',
		id: 1
	}
])
const codeFrom = ref({
	name: 1,
	staff: []
})
const filterFrom = ref({
	date: 2,
	time: '',
	dataSort: 0
})
const queryName = ref('')
const dayOptions = ref([
	{
		label: '昨日',
		value: 0
	},
	{
		label: '近三天',
		value: 1
	},
	{
		label: '近一周',
		value: 2
	},
	{
		label: '近一个月',
		value: 3
	}
])
const tableFrom = ref({
	date: 2,
	time: '',
	queryName: '',
	dataSort: 0
})
const tableData = ref([])
const filterOption = ref({})
let myChart = reactive('')
const dataDetailsVisible = ref(false)
const showdataDetailsVisible = (visible) => {
	dataDetailsVisible.value = visible
}
const initLineCharts = () => {
	myChart = echarts.init(document.getElementById('codeChart'))
	myChart.setOption(LineOption)
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}
}
const toDetails = (row) => {
	dataDetailsVisible.value = true
}
const filterChange = (val) => {
	console.log(val)
	if (val === 0) {
		myChart.setOption(LineOption)
	} else {
		myChart.setOption({
			...LineOption,
			xAxis: {
				data: ['夏小飞']
			},
			legend: {
				data: []
			},
			series: [
				{
					name: '夏小飞',
					type: 'line',
					stack: 'Total',
					data: [0]
				}
			]
		})
	}
	// myChart.dispose();
	// if(){

	// }
}
const changeTable = () => {}
onMounted(() => {
	tableData.value = PromotionRankings
	filterOption.value = JSON.parse(JSON.stringify(LineOption))
	// filterOption.value.xAxis.data = ['夏小飞']
	// filterOption.value.series = [
	// 	{
	// 		name: '夏小飞',
	// 		type: 'line',
	// 		stack: 'Total',
	// 		data: [0]
	// 	}
	// ]
	initLineCharts()
})
</script>
<template>
	<div class="promote-data-statistics">
		<div class="header flex-row">
			<div class="title">
				推广码名称：<el-select v-model="codeFrom.name" class="m-2" placeholder="请选择推广码名称">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					<p class="load-more">没有更多啦～</p>
				</el-select>
			</div>
			<div class="title" style="margin-left: 30px">
				员工：
				<el-select multiple v-model="codeFrom.staff" class="m-2" placeholder="请选择员工">
					<div class="select-title">全部员工 ({{ staffList.length }})</div>
					<div class="search-box">
						<el-input
							style="width: 100%"
							v-model="queryNmme"
							class="w-50 m-2"
							placeholder="请输入员工名称"
							:suffix-icon="Search"
						/>
					</div>

					<el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id">
						<div class="staff-item">
							<img class="avatar-img" :src="item.avatar" alt="" />
							<span class="name">{{ item.name }}</span>
						</div>
					</el-option>
				</el-select>
			</div>
		</div>
		<div class="data-dashboard-wrap flex-row">
			<div class="flex-col" style="width: 49%">
				<label>
					今日数据
					<el-tooltip class="box-item" effect="light" placement="top">
						<template #content>
							<p style="font-size: 14px; color: rgba(0, 0, 0, 0.65)">
								1、今日页面浏览：今日客户浏览推广海报的次数（同一客户多次浏览只计算1次）<br />
								2、今日添加客户数：今日扫码添加的新增客户数，包含流失数据<br />
								3、今日流失客户数：今日扫码添加后将成员删除的客户数<br />
								4、今日净增客户数：今日添加客户数-今日流失客户数
							</p>
						</template>
						<MyIcon class="icon" name="Question"
					/></el-tooltip>
				</label>
				<div class="data-dashboard flex-row">
					<div class="data-item">
						<h3>0</h3>
						<p>今日页面浏览(次)</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>今日添加客户数</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>今日流失客户数</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>今日净增客户数</p>
					</div>
				</div>
			</div>
			<div class="flex-col" style="width: 49%">
				<label>
					总数据
					<el-tooltip class="box-item" effect="light" placement="top">
						<template #content>
							<p style="font-size: 14px; color: rgba(0, 0, 0, 0.65)">
								1、总页面浏览：客户浏览推广海报页面的总次数（同一客户多次浏览只计算1次）<br />
								2、总添加客户数：扫码添加的新增客户总数，包含流失数据 <br />
								3、总流失客户数：扫码添加后将成员删除的客户总数<br />
								4、总净增客户数：总添加客户数-总流失客户数
							</p>
						</template>
						<MyIcon class="icon" name="Question"
					/></el-tooltip>
				</label>
				<div class="data-dashboard flex-row">
					<div class="data-item">
						<h3>0</h3>
						<p>总页面浏览(次)</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>总添加客户数</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>总流失客户数</p>
					</div>
					<div class="data-item">
						<h3>0</h3>
						<p>总净增客户数</p>
					</div>
				</div>
			</div>
		</div>
		<el-divider />
		<div class="chart-data-box">
			<h3>图表数据</h3>
			<div class="data-filter align-side">
				<div class="flex-row">
					<el-select
						style="width: 120px; margin-right: 16px"
						v-model="filterFrom.date"
						class="m-2"
						placeholder="Select"
						size="large"
					>
						<el-option v-for="item in dayOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<span class="desc">自定义：</span>
					<el-date-picker
						style="width: 220px"
						size="large"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						v-model="filterFrom.time"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</div>
				<el-button style="width: 92px; height: 36px"> 重置 </el-button>
			</div>
			<div class="chart-tab">
				<el-radio-group v-model="filterFrom.dataSort" @change="filterChange">
					<el-radio-button :label="0">整体数据</el-radio-button>
					<el-radio-button :label="1">推广排行TOP10</el-radio-button>
				</el-radio-group>
			</div>
			<p class="grid-des" v-if="filterFrom.dataSort === 0">人数</p>
			<p class="grid-des" v-else>净增客户数：0</p>
			<div id="codeChart"></div>
		</div>
		<el-divider />
		<div class="chart-data-box">
			<h3>图表数据</h3>
			<div class="data-filter align-side">
				<div class="flex-row">
					<el-select
						style="width: 120px; margin-right: 16px"
						v-model="tableFrom.date"
						class="m-2"
						placeholder="Select"
						size="large"
					>
						<el-option v-for="item in dayOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<span class="desc">自定义：</span>
					<el-date-picker
						style="width: 220px"
						size="large"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						v-model="tableFrom.time"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</div>
				<el-button style="width: 92px; height: 36px"> 重置 </el-button>
			</div>
			<div class="chart-tab align-side">
				<el-radio-group v-model="tableFrom.dataSort" @change="changeTable">
					<el-radio-button :label="0">推广排行</el-radio-button>
					<el-radio-button :label="1">每日数据</el-radio-button>
				</el-radio-group>
				<div class="flex-row">
					<el-input
						style="width: 220px"
						v-model="tableFrom.queryName"
						class="w-50 m-2"
						placeholder="请输入成员名称"
						:suffix-icon="Search"
					/>
					<el-button
						class="app-btn"
						style="margin-left: 24px; height: 36px; color: #1890ff; border-color: #1890ff"
						@click="exportExcel"
						>导出Excel</el-button
					>
				</div>
			</div>
			<div class="table-wrap">
				<el-table border :data="tableData" style="width: 100%">
					<el-table-column v-if="tableFrom.dataSort === 1" prop="ctime" label="日期" sortable width="180" />
					<el-table-column v-else label="员工" width="180">
						<template #default="scope">
							<div class="flex-row" style="align-items: flex-start">
								<img class="avatar-img" :src="scope.row.avatar" alt="" />
								<p style="font-size: 13px; color: #222222d9; margin-top: -5px">{{ scope.row.creator_name }}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column v-if="tableFrom.dataSort === 0" prop="ranking" sortable>
						<template #header>
							当前排名
							<el-tooltip class="box-item" effect="light" placement="top">
								<template #content>
									<p style="font-size: 14px; color: rgba(0, 0, 0, 0.65)">根据员工推广「净增客户数」排名</p>
								</template>
								<MyIcon name="Question"
							/></el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="ranking" label="页面浏览次数" sortable />
					<el-table-column prop="ranking" label="添加客户数" sortable />
					<el-table-column prop="ranking" label="流失客户数" sortable />
					<el-table-column prop="ranking" label="净增客户数" sortable />
					<el-table-column label="操作" fixed="right" align="right">
						<template #default="scope">
							<span @click="toDetails(scope.row)" style="color: #1890ff">查看详情</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<dataDetails
			:dataSort="tableFrom.dataSort"
			@showModel="showdataDetailsVisible"
			:modelVisible="dataDetailsVisible"
		/>
	</div>
</template>
<style scoped lang="scss">
@import '@/assets/style/groupManagement/codeCommon.scss';
// :deep(.el-table .cell) {
// 	display: flex;
// 	align-items: center;
// }
.name {
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
}
.desc {
	margin-right: 5px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.65);
}
.staff-item {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.icon {
	font-size: 15px;
	margin-left: 5px;
}
.avatar-img {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	margin-right: 10px;
}
.select-title {
	width: 300px;
	padding: 0 20px;
	margin-bottom: 10px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
}
.search-box {
	padding: 0 20px;
	margin-bottom: 6px;
}
.load-more {
	text-align: center;
	color: rgba(0, 0, 0, 0.45);
	font-size: 12px;
}
.promote-data-statistics {
	.header {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.65);
		margin: 24px 0;
	}
	.data-dashboard-wrap {
		width: 100%;
		justify-content: space-between;
		margin: 24px 0;
		label {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
			line-height: 28px;
		}
		.data-dashboard {
			width: 100%;
			height: 120px;
			margin-top: 12px;
			background: #fbfdff;
			border: 1px solid #daedff;

			.data-item:not(:last-child) {
				position: relative;
			}
			.data-item {
				flex: 1;
				padding: 32px 0;
				h3 {
					text-align: center;
					font-size: 24px;
					font-weight: 500;
					color: #000;
					line-height: 33px;
				}
				p {
					margin-top: 5px;
					font-size: 13px;
					color: rgba(0, 0, 0, 0.55);
					line-height: 18px;
					text-align: center;
					white-space: nowrap;
				}
			}
			.data-item:not(:last-child):after {
				content: '';
				width: 1px;
				height: 38px;
				background: #e9e9e9;
				position: absolute;
				right: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
		}
	}
	.chart-data-box {
		width: 100%;
		h3 {
			font-size: 17px;
			font-weight: 500;
			color: #333;
			line-height: 24px;
		}
		.data-filter {
			margin-top: 24px;
		}
		.chart-tab {
			margin: 24px 0;
		}
		.grid-des {
			margin-bottom: 10px;
			color: rgba(0, 0, 0, 0.45);
			font-size: 12px;
		}
		#codeChart {
			width: 100%;
			height: 440px;
			margin-bottom: 24px;
		}
		.table-wrap {
			width: 100%;
		}
	}
}
</style>
